<template>
	<view class="page">
		<scroll-view :scroll-into-view="scrollIntoView" scroll-y @scroll="scrollIntoView=''">
			<artile v-if="preview" :title="title" :data="data"></artile>
			<view  v-else class="content">
				<textarea class="title" placeholder="请输入文章标题" v-model="title"  auto-height :maxlength='50' focus adjust-position adjust-keyboard-to="bottom" :cursor-spacing="cursorSpacing"/>
				<view class="insert" id="insert-0" :class="{on:insertIndex == 0}" @click="handleLineTouch(0)"></view>
				<block v-for="(item,index) in data" :key="index">
					<view class="unit"  >
						<textarea class="p" v-if="item.type=='p'" placeholder="请输入段落内容" v-model="item.content" auto-height :maxlength='500' focus adjust-position adjust-keyboard-to="bottom" :cursor-spacing="cursorSpacing"></textarea>
						<textarea class="b" v-if="item.type=='b'" placeholder="请输入标题内容" v-model="item.content" auto-height :maxlength='50' focus adjust-position adjust-keyboard-to="bottom" :cursor-spacing="cursorSpacing"></textarea>
						<image v-if="item.type=='img'" mode="widthFix" :src="item.content"/>
						<text class="close" @click="handleCutUnit(index)">×</text>
					</view>
					<view class="insert" :id="`insert-${index+1}`" :class="{on:insertIndex == index+1}" @click="handleLineTouch(index+1)"></view>
				</block>
				
				<view class="content-empty" v-if="data.length==0">
					请先添加类型
				</view>
			</view>
		</scroll-view>
		<view class="control">
			<view class="control-options">
				<image :src="require('@/static/img/b.svg')" mode="heightFix" @click="handleAddUnit('b')" />
				<image :src="require('@/static/img/p.svg')" mode="heightFix" @click="handleAddUnit('p')" />
				<image :src="require('@/static/img/img.svg')" mode="heightFix" @click="handleAddUnit('img')" />
			</view>
			<view class="control-btn" @click="handlePreview">预览</view>
			<view class="control-btn" @click="handleReport">发布</view>
		</view>
	</view>
</template>

<script>
	import artile from './componentArticle.vue'
	let deviceWidth = wx.getSystemInfoSync().windowWidth; //获取设备屏幕宽度
	let unit = deviceWidth/750;//1单位rpx的px值
	export default {
		components: { artile },
		data(){
			return {
				title:"嵊州：关于落实Ⅰ级响应加强疫情防控工作的通告（第17号）",
				data:[
					{
						type:'p',
						content:'根据国家、省、市疫情防控有关规定，我市从2021年12月9日16时起启动突发公共卫生事件Ⅰ级应急响应。为坚决阻断新冠肺炎疫情传播途径，有效遏制疫情扩散和蔓延，现就做好当前疫情防控工作通告如下：'
					},
					{
						type:'b',
						content:'一、主动配合防疫工作。'
					},
					{
						type:'p',
						content:'请广大市民群众密切关注阳性感染者相关信息，如与阳性感染者活动轨迹有交集的，应当主动向所在村（社区）、工作单位报备（或通过“浙里办”APP-“嵊里办”进行个人自主申报，也可通过扫二维码申报）。若接到疫情核查电话，请积极配合，如实反映个人出行情况，并配合落实防控措施。全市党员领导干部要带头做到不外出聚餐、非必要不进入室内娱乐休闲场所、非必要不出嵊。'
					},
					{
						type:'b',
						content:'二、落实健康管控措施。'
					},
					{
						type:'p',
						content:'对国内中高风险地区来嵊返嵊人员分类实施健康管理措施，其中对12月1日起来自上虞区百官街道阳光假日小区、华维北区、西横河小区以及与阳性感染者有轨迹交集的人员，采取“14+7”集中隔离管控措施；对12月1日以来有上虞区百官街道（除上述小区）、曹娥街道和上浦镇旅居史的人员，采取“3+11”管理措施。对12月1日以来有上虞区其他区域旅居史的人员，采取“14天日常健康监测”管理措施，第1、3、14天前往愿检尽检服务点进行核酸检测，期间出现发热、咳嗽、咽痛、腹泻、味觉嗅觉减退等症状的转为“14+7”集中隔离管控措施。'
					},
					{
						type:'b',
						content:'三、加强公共场所防控'
					},
					{
						type:'p',
						content:'持续落实重点场所防控要求,加强发热门诊、零售药店等哨点监管，加强对高铁站、汽车客运站、酒店、商场超市等人员密集场所管理，严格落实“测温+戴口罩+健康码+行程码+疫苗查验+引导登记”准入制度。景区景点要进一步强化预约、限流、错峰等措施，旅游景区接待游客量不超过最大承载量的 50%。各行政村(社区)在属地乡镇(街道)指导下，严格落实防疫要求，严格执行防控六查验制度，全面加强公共卫生管理和消杀工作。各级各类企业要严格落实企业主体责任，严守企业小门，原则上不接受非本单位职工入内；要加强企业职工宿舍管理，引导不串门、少聚集。'
					},
					{
						type:'img',
						content:'https://img.tmuyun.com/assets/20211210/1639108387195_61b2cf23b40eef5ff04de572.jpeg',
						
					}
				],
				insertIndex:0,//插入位置
				cursorSpacing: unit*20,
				scrollIntoView:'',
				preview: false,
			}
		},
		mounted(){
			this.insertIndex = this.data.length;	
		},
		methods:{
			handleLineTouch(index){
				this.insertIndex = index;
			},
			handleAddUnit(type){
				const unitPush = (type, content='') =>{
					this.data.splice(this.insertIndex,0,{ type, content });
					this.insertIndex ++;
					this.scrollIntoView = `insert-${this.insertIndex==0?0:this.insertIndex-1}`
				}
				if(type == 'b') unitPush('b');
				if(type == 'p') unitPush('p');
				if(type == 'img'){
					wx.chooseMedia({
						count: 9,
						mediaType: ['image'],
						/*
							image	只能拍摄图片或从相册选择图片
							video	只能拍摄视频或从相册选择视频
							mix	可同时选择图片和视频
						*/
						sourceType: ['album', 'camera'],//图片和视频选择的来源
						sizeType: ['original', 'compressed']
					}).then(res=>{
						res.tempFiles.forEach(e=>{
							unitPush('img', e.tempFilePath);
						})
					})
				}
			},
			handleCutUnit(index){
				this.data.splice(index,1);
				if(this.insertIndex > this.data.length){
					this.insertIndex = this.data.length;
				}
			},
			
			handlePreview(){
				this.preview = !this.preview;
			},
			handleReport(){
				this.scrollIntoView = '#insert-3'
			}
		}
	}
</script>

<style lang='scss' scoped>
	.page{
		height: 100%;
		display: flex;
		flex-direction: column;
		scroll-view{
			flex: 1;
			overflow: auto;
			.content{
				padding:20rpx 30rpx;
				box-sizing: border-box;
				position: relative;
				.title{
					flex-shrink: 0;
					font-size: 40rpx;
					font-weight: bold;
					padding:30rpx 0;
				}
				.unit{
					position: relative;
					border: 1rpx dashed #ddd;
					box-sizing: border-box;
					padding: 20rpx;
					width: 100%;
					margin: 30rpx 0;
					textarea{
						width: 100%;
						background-color: #fff;
						font-size: 35rpx;
						&.b{
							font-weight: bold;
						}
					}
					image{
						max-width: 100%;
					}
					.close{
						position: absolute;
						top: -15rpx;
						right: -15rpx;
						width: 40rpx;
						height: 40rpx;
						border-radius: 20rpx;
						display: inline-flex;
						align-items: center;
						justify-content: center;
						background-color: red;
						color: #fff;
						z-index:100;
					}
				}
				
				.insert{
					width: 100%;
					padding: 10rpx 0;
					position: relative;
					@keyframes myAnimation {
						0%, 100%{background-color: #efefef;}
						50%{background-color: red;}
					}
					&::before{
						display: block;
						content: '';
						background-color: #efefef;
						height: 1rpx;
						width:100%;
					}
					&.on::before{
						background-color: red;
						animation: myAnimation 1.06s infinite steps(1, start);
					}
				}
			}
				
		}
		
		
		.control{
			flex-shrink: 0;
			width:100%;
			display: flex;
			padding:20rpx 30rpx;
			box-sizing: border-box;
			box-shadow: 0 0 20rpx 5rpx rgba(0, 0, 0, 0.1);
			z-index:100;
			.control-options{
				flex: 1;
				display: flex;
				align-items: center;
				image{
					width: 70rpx;
					height: 50rpx;
					margin-right:20rpx;
				}
			}
			.control-btn{
				flex-shrink: 0;
				width:120rpx;
				height: 70rpx;
				background-color: #eee;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				border-radius: 35rpx;
				font-size: 30rpx;
				&+.control-btn{
					margin-left:20rpx;
				}
			}
		}
	}
</style>